<script setup lang="ts">
  import axios from "axios";
  import macros from "../macros.ts";
  import {onBeforeMount, onMounted, ref} from "vue";
  var photoList=ref([]);

  axios.get(macros.server+"/api/photolist")
      .then(function (response){
        photoList.value=response.data.data;
      }).catch(function (error) {
    alert(error);
    console.log(error);
  });

</script>

<template>
  <h2>我们的作品</h2>
  <div id="photos" v-for="(photo,i) in photoList" style="display: inline-block">
    <router-link :to="{name:'ViewPhoto',params:{id:photo.id}}"><img :src="photo.photolink" class="photo"/></router-link>
  </div>
</template>

<style scoped>
@media only screen and (max-width: 600px) {
  .photo{
    width: 80vw;
  }
}
@media only screen and (min-width: 600px) {
  .photo {
    width: 20vw;
  }
}
</style>